<template>
  <cu-layout :bgStyle="{ color: '#ffffff' }" :navProp="{ placeholder: true }">
    <view :class="[`${prefixCls}-temporary-pass-container`]" :style="{ height: `calc(100vh - ${$Platform.navbar}px)` }">
      <uv-form labelPosition="left" label-width="150" :model="formData" ref="form">
        <uv-form-item borderBottom>
          <view class="form-item-container">
            <image class="iamge" :src="$CDN('/common/static/images/img_yousuo@3x.png')"></image>
            <view>{{ formData.room_name }}</view>
          </view>
        </uv-form-item>
        <uv-form-item label="使用人姓名" prop="pwd_user_name" borderBottom>
          <uv-input v-model="formData.pwd_user_name" inputAlign="right" placeholder="请输入密码使用人姓名" border="none"> </uv-input>
        </uv-form-item>
        <uv-form-item label="使用人手机" prop="sex" borderBottom>
          <uv-input v-model="formData.pwd_user_phone" type="number" maxlength="11" inputAlign="right" placeholder="请输入密码使用人手机号" border="none"> </uv-input>
        </uv-form-item>
        <view class="tips">临时密码将下发至使用人收集，使用人可在2小时内（自然时间）内使用该密码进入您的房间，使用后密码立即失效。</view>
        <uv-button type="primary" :disabled="!formData.pwd_user_name || !formData.pwd_user_phone" text="下发密码" customStyle="margin-top: 10px" @click="submit"></uv-button>
        <view class="tips primary center">为了确保您的安全，请谨慎使用此功能。</view>
      </uv-form>
      <uv-modal
        ref="modal"
        showCancelButton
        :content="`${formData.pwd_user_name}的手机${formData.pwd_user_phone}将以短信方式收到密码，有效期2小时。是否确认下发`"
        @confirm="confirm"
      ></uv-modal>
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { sendTempPwd } from './api'

export default {
  name: 'setting',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      formData: {
        pwd_user_name: '',
        pwd_user_phone: '',
        room_name: '',
      },
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {},
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    async getData() {
      const { pwd_user_name, pwd_user_phone } = this.formData
      const { lock_id } = this.$Route.query
      const { data } = await sendTempPwd({ pwd_user_name, pwd_user_phone, lock_id })
    },
    submit() {
      const nameRegex = /^[\u4e00-\u9fa5]+$/
      const phoneRegex = /^1[3-9]\d{9}$/
      const { pwd_user_name, pwd_user_phone } = this.formData
      if (!nameRegex.test(pwd_user_name)) {
        uni.$uv.toast('请输入正确的姓名!')
        return false
      }
      if (!phoneRegex.test(pwd_user_phone)) {
        uni.$uv.toast('请输入正确的手机号!')
        return false
      }
      this.$refs.modal.open()
    },
    confirm() {
      this.getData()
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('temporary-pass-container')} {
  position: relative;
  background: white;
  width: 100%;
  box-sizing: border-box;
  padding: 0 15px;
  .form-item-container {
    padding: 30px 0;
    .iamge {
      width: 80px;
      height: 80px;
    }
  }
  .tips {
    font-size: 20rpx;
    color: #666666;
    margin: 10px 0;
  }
  .primary {
    color: $uv-primary;
  }
  .center {
    text-align: center;
  }
}
</style>
